<template>
  <detailsLayout :leftTitle="`全部${pageTitle}`">
    <div class="page-cell"> 
      <ul class="person-list" v-show="pageTitle=='报案人'">
        <cardBlock class="person-item" v-for="(item,index) in reporterData" :key="`per_bar_${index}`" :imgUrl="item.xp">
          <div slot="name" class="person-item__title">
            <strong class="name">{{item.xm}}</strong>  
          </div>
          <div slot="tags" class="card-tags">
            <span class="tag" v-for="i in item.bs.col_val" >{{i}}</span> 
          </div>  
          <div class="info-grid" slot="data">
            <div class="grid-item align-left" >
              <em>性别</em> <span>{{item.xb}}</span>
            </div>
            <div class="grid-item align-left" v-for="(j,indexj) in item.rowArr">
              <em>{{j.col_cn}}</em>  <span v-init-tooltips="(indexj==0)?{
                    tableName: item.name,
                    systemid: item.systemid,
                    bshlx: '001',
                    bsh: j.col_val,
                    dalx: 'AJ'
                }:null">{{j.col_val}}</span>
            </div>
          </div>
        </cardBlock>
      </ul>

      <ul class="person-list" v-show="pageTitle=='受害人'"> <!--受害人-->
        <cardBlock class="person-item"  v-for="(item,index) in vicitimData"  :key="`per_shr_${index}`" :imgUrl="item.xp" >
          <div slot="name" class="person-item__title clearfix">
            <strong class="name">{{item.xm}}</strong>  
          </div>
          <div slot="tags" class="card-tags"> 
            <span class="tag" v-for="(i, index) in item.bs.col_val" :key="`shr_${index}`">{{i}}</span>  
          </div>
          <div class="info-grid" slot="data">
            <div class="grid-item align-left" >
              <em>性别</em> <span>{{item.xb}}</span>
            </div>
            <div class="grid-item align-left" v-for="(j,indexj) in item.rowArr">
              <em>{{j.col_cn}}</em>  <span v-init-tooltips="(indexj==0)?{
                    tableName: item.name,
                    systemid: item.systemid,
                    bshlx: '001',
                    bsh: j.col_val,
                    dalx: 'AJ'
                }:null">{{j.col_val}}</span>
            </div> 
          </div>
        </cardBlock>
      </ul>

       <ul class="person-list" v-show="pageTitle=='嫌疑人'"> <!--嫌疑人-->
        <cardBlock class="person-item" v-for="(item,index) in suspectorData" :key="`per_xyr_${index}`" :imgUrl="item.xp">
          <div slot="name" class="card-name clearfix">
            <strong class="name">{{item.xm}}</strong> <span class="tip">{{item.dazt}}</span> 
          </div>
          <div slot="tags" class="card-tags"> 
            <span class="tag" v-for="(i, index) in item.bs.col_val" :key="`xyr_${index}`"> {{i}} </span> 
          </div>
          <div class="info-grid" slot="data">
            <div class="grid-item align-left" >
              <em>性别</em> <span>{{item.xb}}</span>
            </div>
            <div class="grid-item align-left" v-for="(j,indexj) in item.rowArr">
              <em>{{j.col_cn}}</em> <span v-init-tooltips="(indexj==0)?{
                    tableName: item.name,
                    systemid: item.systemid,
                    bshlx: '001',
                    bsh: j.col_val,
                    dalx: 'AJ'
                }:null">{{j.col_val}}</span>
            </div> 
          </div>
        </cardBlock> 
      </ul>  
    </div>
  </detailsLayout>
</template>

<script>
import { mapState } from 'vuex'
import detailsLayout from '../../components/details-layout'
import detailsGroup from '../../components/details-group'
import cardBlock from '../../components/card-block'
export default {
  name: 'subPagePerson',
  props: {
  },
  data() {
    return {
      pageTitle: '报案人'
    }
  },
  components: {
    detailsLayout, detailsGroup, cardBlock
  },
  filters: {
  },
  methods: {
  },
  computed: {
    ...mapState('caseStore', {
      reporterData: 'reporterData', // 报案人
      vicitimData: 'vicitimData',  // 受害人
      suspectorData: 'suspectorData' // 嫌疑人
    })
  },
  mounted() {
    console.log(this.$route.query)
    this.pageTitle = this.$route.query.titleKey
  },
  created() {
    console.log(this.reporterData)
    if (!this.reporterData.length && !this.vicitimData.length && !this.suspectorData.length) {
      this.$router.push({path: '/case'})
    }
  }

}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../style/mixin";
@import "../../style/public";
.clearfix {
  @include clearfix  
}
/*div,ul,li,h1,h2,h3,h4{
  box-sizing:border-box;
}
p,ul,li{
  margin:0;
  padding:0;
}*/
.page-cell {
  font-size: 1rem;
  // line-height: 1.4;
  margin:0 auto;
  max-width:640px;
}
.person-list{
  padding: 0 3%;
  .person-item{
    .card-name{ 
      strong.name{ 
        font-size: 1.1rem;
        vertical-align: middle;
      }
      span{ 
        display:inline-block;
        font-size: .8rem; 
        padding: 0 .3rem;
        color: #fff;
        border-radius: .2rem;
        vertical-align: middle;
        background: #ff6600;
      }
    }
  }
}
</style>
